<script>
	import {
		uploadOss
	} from "@/util/uploadOss";
	// 查询相册权限
	import permision from "@/js_sdk/wa-permission/permission.js"

	export default {
		name: 'uni-byt-upload-imgList',
		props: {
			urlList: {
				type: Array,
				default: () => []
			},
			styleName: {
				type: String,
				default: ''
			},
			className: {
				type: String,
				default: ''
			},
			// 上传类型 video:视频
			uploadType: {
				type: String,
				default: 'images'
			},
			// 名称
			name: {
				type: String,
				default: ''
			},
			// 最大上传数量
			maxCount: {
				type: Number,
				default: 5
			},
		},
		data() {
			return {
				invenShow: false,
			}
		},
		computed: {
			urlListArr: {
				get() {
					return this.urlList
				},
				set(val) {
					this.$emit("update:urlList", val)
				}
			}
		},
		methods: {
			//用户授权权限后的回调
			changeAuth() {
				//这里是权限通过后执行自己的代码逻辑
				console.log('权限已授权，可执行自己的代码逻辑了');
				this.imgChange()
			},
			//这个是自己的方法名
			openAuth() {
				// #ifdef H5 || MP-WEIXIN
				// 用户同意授权
				this.handleUpload()
				// #endif
				// #ifndef H5 || MP-WEIXIN
				const systemInfo = uni.getSystemInfoSync()
				if (systemInfo.osName == "android") {
					this.$refs['authpup'].open() //调起自定义权限目的弹框,具体可看示例里面很详细
				} else {
					this.imgChange()
				}
				// #endif
			},
			// vue的method里编写如下代码
			async requestAndroidPermission(permisionID) {
				const systemInfo = uni.getSystemInfoSync()
				let result = null
				if (systemInfo.osName == "android") {
					result = await permision.requestAndroidPermission(permisionID)
				} else {
					// 用户同意授权
					this.handleUpload()
					result = await permision.judgeIosPermission(permisionID)
				}


				if (result == 1) {
					if (systemInfo.osName == "android") {
						// 用户同意授权
						this.handleUpload()
					}
					console.log("已获得授权");
				} else if (result == 0) {
					console.log("未获得授权，重新获取权限");

				} else {
					this.invenShow = true
					console.log("被永久拒绝权限，重新获取权限");
				}
			},
			// 确认重新获取权限
			confirmPage() {
				this.invenShow = false
				permision.gotoAppPermissionSetting()
			},
			// 打开相册
			imgChange() {
				// #ifdef H5 || MP-WEIXIN
				// 用户同意授权
				this.handleUpload()
				// #endif

				// #ifdef APP-PLUS
				const systemInfo = uni.getSystemInfoSync()
				if (systemInfo.osName == "android") {
					// 查询相册权限
					this.requestAndroidPermission("android.permission.READ_EXTERNAL_STORAGE")
				} else {
					// 查询相册权限 ios
					this.requestAndroidPermission("photoLibrary")
				}
				// #endif
			},
			// 验证图片的有效性
			async verifyImageUsefull(url) {
				console.log(url);
				if (this.uploadType == 'video') {
					uni.$u.toast('视频上传成功')
				} else if (this.uploadType == 'images') {
					uni.$u.toast('图片上传成功')
				} else {
					uni.$u.toast('文件上传成功')
				}
				this.urlListArr.push({
					type: this.uploadType,
					url
				})
				this.$emit('change', this.urlListArr);
			},

			// 选取文件
			handleUpload() {
				const that = this
				if (this.uploadType == 'video') {
					console.log("我想要上传视频")
					// 视频上传 uni.chooseVideo
					uni.chooseVideo({
						sourceType: ['camera', 'album'],
						success: async function(res) {
							console.log("视频是", res)
							let file = res.tempFilePath
							const {
								url
							} = await uploadOss({
								url: file,
								type: 'audio'
							});
							if (url) {
								that.verifyImageUsefull(url);
							} else {
								uni.$u.toast('视频上传失败');
							}
						},
						fail(err) {
							console.error(err);
							uni.$u.toast('无法启用上传视频')
						}
					});
				} else if (this.uploadType == 'images') {
					console.log("我想要上传图片")
					// 图片上传
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: async function(res) {
							console.log("图片是", res)
							let file = res.tempFilePaths[0]
							const {
								url
							} = await uploadOss({
								url: file,
								type: 'image'
							});
							if (url) {
								that.verifyImageUsefull(url);
							} else {
								uni.$u.toast('图片上传失败');
							}
						},
						fail(err) {
							console.error(err);
							uni.$u.toast('无法启用上传图片')
						}
					})
				} else {
					console.log("仅支持视频和图片")
					uni.$u.toast("仅支持视频和图片")
				}
			},
		}
	}
</script>

<template>
	<view class="flex flex-row items-center flex-wrap">
		<view class="wh-72 mr-8 mb-8 border" v-for="item in urlListArr" :key="item.url">
			<image class="wh-72" v-if="item.type=='images'" :src="item.url" mode=""></image>
			<video class="wh-72" v-if="item.type=='video'" :src="item.url"></video>
		</view>

		<view v-if="urlListArr.length < maxCount" class="upload_form_box posi-re border wh-72" :class="className"
			@click="openAuth" :style="`background-color: white;`+styleName">
			<image class="upload_form_box_img"
				src="https://img.yummall.cn/baiyetong/yunmaobms/static/images/register/upload.png" mode="">
			</image>
			<text class="upload_form_box_name text-14">{{name}}</text>

			<!-- 获取权限弹窗 -->
			<view style="width: 0;height: 0;position: absolute;">
				<u-modal :show="invenShow" title="未获取权限,是否跳转权限更改" confirmColor='rgba(139, 97, 243, 1)'
					@close="()=>invenShow=false" @cancel="()=>invenShow=false" @confirm="confirmPage"
					:closeOnClickOverlay="true" :showCancelButton="true">
					<text class="text-14"
						style="width: 500rpx;flex-wrap: wrap;">我们需要获取相册权限才可以进行更换头像的功能,不会进行其他的操作,获取权限只用于更换头像功能</text>
				</u-modal>
			</view>


			<!--  安卓首次获取权限时的说明 -->
			<view style="height: 0;width: 0;">
				<uni-home-yk-authpup ref="authpup" type="top" @changeAuth="changeAuth"
					permissionID="WRITE_EXTERNAL_STORAGE"></uni-home-yk-authpup>
			</view>
		</view>
	</view>
</template>

<style scoped>
	view {
		box-sizing: border-box;
	}

	.upload_form_box {
		background-size: cover;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.upload_form_box_img {
		width: 36rpx;
		height: 36rpx;
	}

	.upload_form_box_name {
		display: inline-block;
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #8848CB;
	}
</style>